<template>
  <CardTitle title="首页" :color="'#5c5c5c'" />
  <el-row :gutter="10" class="mt-20px justify-between">
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 我的客户 </div>
        <div class="text-20px mt-10px color-#5c5c5c"> {{ detailNum.customerNum || 0 }} </div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="w-45px h-45px img-p" :src="MoneyImg"></el-image>
      </ContentWrap>
    </el-col>
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 累计充值 </div>
        <div class="text-20px mt-10px color-#5c5c5c"> {{ detailNum.totalRecharge || 0 }}元 </div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="w-40px h-45px img-p" :src="LogImg"></el-image>
      </ContentWrap>
    </el-col>
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 话费消耗 </div>
        <div class="text-20px mt-10px color-#5c5c5c"> {{ detailNum.totalCost || 0 }} 分钟</div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="w-40px h-40px img-p" :src="StaticImg"></el-image>
      </ContentWrap>
    </el-col>
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 总成本 </div>
        <div class="text-20px mt-10px color-#5c5c5c">{{ detailNum.totalCostPrice || 0 }}元 </div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="w-50px h-50px img-p" :src="performanceImg"></el-image>
      </ContentWrap>
    </el-col>
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 总计费 </div>
        <div class="text-20px mt-10px color-#5c5c5c">{{ detailNum.totalSalePrice || 0 }}元 </div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="w-50px h-50px img-p" :src="performanceImg"></el-image>
      </ContentWrap>
    </el-col>
    <el-col :span="4" class="p-r">
      <ContentWrap>
        <div class="text-16px color-#172b4d"> 总利润 </div>
        <div class="text-20px mt-10px color-#5c5c5c">
          {{ detailNum.totalProfit?.toFixed(2) || 0 }}元
        </div>
        <el-divider class="!mt-10px !mb-10px"></el-divider>
        <el-image class="ww-45px h-45px img-p" :src="SeeImg"></el-image>
      </ContentWrap>
    </el-col>
  </el-row>
  <el-tabs v-model="tabType" class="demo-tabs">
    <el-tab-pane label="我的客户" :name="1"></el-tab-pane>
    <el-tab-pane label="客户支付记录" :name="2"></el-tab-pane>
    <el-tab-pane label="客户话费使用记录" :name="3"></el-tab-pane>
    <el-tab-pane label="开户提交记录" :name="4"></el-tab-pane>
    <el-tab-pane label="充值申请记录" :name="5"></el-tab-pane>
  </el-tabs>
  <CustomerTable v-if="tabType == 1" />
  <CustomerPayTable v-if="tabType == 2" />
  <CustomerLogTable v-if="tabType == 3" />
  <ApprovePage v-if="tabType == 4" />
  <RechargePage v-if="tabType == 5" />
</template>

<script setup>
import { CardTitle } from '@/components/Card'
import CustomerTable from './components/customer.vue'
import CustomerPayTable from './components/payCustomer.vue'
import CustomerLogTable from './components/logCustomer.vue'
import ApprovePage from './components/approvePage.vue'
import LogImg from '@/assets/imgs/log.png'
import MoneyImg from '@/assets/imgs/money.png'
import SeeImg from '@/assets/imgs/see.png'
import StaticImg from '@/assets/imgs/static.png'
import TimeImg from '@/assets/imgs/time.png'
import performanceImg from '@/assets/imgs/performance.png'
import * as proxyApi from '@/api/home/proxy.ts'
import RechargePage from './components/rechargePage.vue'
const tabType = ref(1)

const detailNum = ref({})
/**代理商首页统计接口*/
const getProxyMain = async () => {
  detailNum.value = await proxyApi.getProxyMain()
}
onMounted(() => {
  getProxyMain()
})
</script>

<style lang="scss" scoped>
.p-r {
  position: relative;
  overflow: hidden;
}
.z-Idx {
  z-index: 9;
}
.img-p {
  position: absolute;
  right: 5px;
  bottom: 16px;
  z-index: 0;
}
.el-divider--horizontal {
  z-index: 9;
}
</style>
